<template>
    <div class="userInfo">
        <!-- 主页 -->
        <div v-if="onlySole == '10'" class="allInfo">
            <v-title
                :content="'个人信息'"
                :font-size="20"
            />
            <el-form label-width="80px" :model="allform" class="formInfo">
                <el-row>
                    <el-col :span="12">  
                        <el-form-item label="用户名">
                            <el-input v-model="allform.username" style="width: 200px" disabled></el-input>
                            <p>*用户名即为登录账号，请牢记~</p>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="姓名">
                            <el-input v-model="allform.name" style="width: 200px" disabled></el-input>
                            <p>*实名认证通过后，才可对标的进行报名参拍</p>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">  
                        <el-form-item label="手机号">
                            <el-input v-model="allform.mobile" style="width: 200px" disabled></el-input>
                            <v-btn type="plain" size="mini" @click="aftermobileGo" class="btnamend">
                                修改
                            </v-btn>
                            <!-- <el-button @click.prevent="removeDomain(domain)">修改</el-button> -->
                            <!-- <el-button @click="aftermobileGo">修改</el-button> -->
                            <p>*手机号可作为登录账号，请牢记～</p>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="邮箱">
                            <el-input v-model="allform.email" style="width: 200px" disabled></el-input>
                            <!-- <v-btn :content="'立即绑定'" :font-size="14" class="btnamend"/> -->
                            <!-- <el-button @click="emailBindGo">立即绑定</el-button> -->
                            <v-btn type="plain" size="mini" @click="emailBindGo" class="btnamend">
                               {{allform.email ? '修改绑定' : ' 立即绑定'}}
                            </v-btn>
                            <p>*邮箱可用于快速找回登录密码</p>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <v-title
                :content="'安全服务'"
                :font-size="20"
            />
            <el-card shadow="hover" class="card_line">
                <div class="c_content">
                    <p>
                        <span class="c_title">实名认证</span>
                        <span>用于提升账号的安全性和信任级别。实名认证通过后，方可进行报名参拍。</span>
                    </p>
                    <v-btn type="plain" size="mini" @click="personageGo('1')">
                        {{allform.name ? '实名' : '去实名'}}
                    </v-btn>
                </div>
            </el-card>
            <el-card shadow="hover" class="card_line">
                <div class="c_content">
                    <p>
                        <span class="c_title">登录密码</span>
                        <span>互联网账号存在被盗风险，建议您定期更改密码以保护账户安全。</span>
                    </p>
                    <v-btn type="plain" size="mini" @click="personageGo('2')">
                        修改密码
                    </v-btn>
                </div>
            </el-card>
            <el-card shadow="hover" class="card_line">
                <div class="c_content">
                    <p>
                        <span class="c_title">手机绑定</span>
                        <span>可作为登录账号，可用于接收短信提醒、快速找回密码等。</span>
                    </p>
                    <v-btn type="plain" size="mini" @click="personageGo('3')">
                        修改绑定
                    </v-btn>
                </div>
            </el-card>
            <el-card shadow="hover" class="card_line">
                <div class="c_content">
                    <p>
                        <span class="c_title">邮箱绑定</span>
                        <span>可用于快速找回登录密码。</span>
                    </p>
                    <v-btn type="plain" size="mini" @click="personageGo('4')">
                        {{allform.email ?'修改绑定' : '去绑定'}}
                    </v-btn>
                </div>
            </el-card>
            <el-card shadow="hover" class="card_line">
                <div class="c_content">
                    <p>
                        <span class="c_title">资质信息</span>
                        <span>上传个人资质图片（非证件照）</span>
                    </p>
                    <v-btn type="plain" size="mini" @click="personageGo('5')">
                        上传
                    </v-btn>
                </div>
            </el-card>
            <el-card shadow="hover" class="card_line">
                <div class="c_content">
                    <p>
                        <span class="c_title">注销账号</span>
                        <span>注销后无法恢复，请谨慎操作</span>
                    </p>
                    <v-btn type="plain" size="mini" @click="personageGo('6')">
                        注销
                    </v-btn>
                </div>
            </el-card>
        </div>

        <!------ 实名认证 --------->
        <div v-else-if="onlySole == '1'" class="realName">
            <div class="title_box">
                <v-title
                    :content="'实名认证'"
                    :font-size="20"
                />
                <div @click="goBackInfo" class="return_btn">返回</div>
            </div>
            
            <div style="margin: 10px 0;">
                <el-alert
                    v-if="authen == '1'"
                    title="认证成功"
                    type="success">
                </el-alert>
                <el-alert
                    v-else-if="authen == '2'"
                    title="审核中"
                    type="warning"
                    :closable="false">
                </el-alert>
                <el-alert
                    v-else-if="authen == '3'"
                    :title="'状态：被驳回；驳回原因：'+remark"
                    type="error"
                    :closable="false">
                </el-alert>
                <el-alert
                    v-else
                    title="未认证"
                    type="info"
                    :closable="false">
                </el-alert>
            </div>
            <el-form v-if="levelType=='1'" ref="form" :model="form" :rules="rules" label-width="140px">
                <el-form-item label="用户姓名:" prop="name">
                    <el-input v-model="form.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="身份证号:" prop="card_num">
                    <el-input v-model="form.card_num" style="width: 200px"></el-input>
                </el-form-item>
                <div class="tip_firm">
                    <span class="tip_start">上传身份证照片</span>
                    <span>请按照以下要求上传身份证照片（格式要求：jpg、jpeg、png，小于2m）</span>
                </div>
                <div class="card_img_up">
                    <div class="face_box">
                        <div class="tit_face_up">上传身份证人像面</div>
                        <el-upload
                            class="avatar-uploader"
                            :action="imgurls + '/api/Common/upload'"
                            :show-file-list="false"
                            :on-success="upload_pic1">
                            <img v-if="form.card_pic1" :src="imgurls+ form.card_pic1" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon" style="border: 1px solid #c1c1c1;"></i>
                        </el-upload>
                    </div>
                    <div>
                        <div class="tit_face_up">上传身份证国徽面</div>
                        <el-upload
                            class="avatar-uploader"
                            :action="imgurls + '/api/Common/upload'"
                            :show-file-list="false"
                            :on-success="upload_pic2">
                            <img v-if="form.card_pic2" :src="imgurls+ form.card_pic2" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon" style="border: 1px solid #c1c1c1;"></i>
                        </el-upload>
                    </div>
                </div>
                <div class="card_img_up">
                    <div class="severBig_Img face_box">
                        <div class="tit_face_up">示例：</div>
                        <img @click="imgMagnifyOne" :src="smalloneImg.url" alt="">
                    </div>
                    <div class="severBig_Img">
                        <div class="tit_face_up">示例：</div>
                        <img @click="imgMagnifyTwo" :src="smallTwoImage.url" alt="">
                    </div>
                </div>
                <div class="btn_firm_footer" v-if="authen=='3' || authen=='0'">
                    <v-btn type="plain" size="small" @click="onSubmit">
                        提 交
                    </v-btn>
                </div>
                <el-form-item v-if="authen=='2'">
                    <p style="color: #e03e2d;">实名审核中，请联系管理员操作</p>
                </el-form-item>
            </el-form>

            <el-form v-if="levelType=='2'" ref="formCompany" :model="formCompany" :rules="rulesCompany" label-width="140px">
                <div class="w_tit_com">机构基本信息</div>
                <el-form-item label="机构名称" prop="name">
                    <el-input v-model="formCompany.name" size="mini" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="统一社会信用代码" prop="card_num">
                    <el-input v-model="formCompany.card_num" size="mini" style="width: 200px"></el-input>
                </el-form-item>
                <div class="w_tit_com">法人基本信息</div>
                <el-form-item label="法人证件" prop="card_ty">
                    <el-select v-model="formCompany.card_ty" size="mini" placeholder="请选择">
                        <el-option
                        v-for="item in options_legalPerson"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div class="tip_firm">
                    <span class="tip_start">法人证件</span>
                    <span>请按照以下要求上传证件照片（格式要求：jpg、jpeg、png，小于2m）</span>
                </div>
                <div class="card_img_up">
                    <div class="face_box">
                        <div class="tit_face_up">上传身份证人像面</div>
                        <el-upload
                            class="avatar-uploader"
                            :action="imgurls + '/api/Common/upload'"
                            :show-file-list="false"
                            :on-success="upload_picFirm1">
                            <img v-if="formCompany.card_pic1" :src="imgurls+ formCompany.card_pic1" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon" style="border: 1px solid #c1c1c1;"></i>
                        </el-upload>
                    </div>
                    <div>
                        <div class="tit_face_up">上传身份证国徽面</div>
                        <el-upload
                        class="avatar-uploader"
                        :action="imgurls + '/api/Common/upload'"
                        :show-file-list="false"
                        :on-success="upload_picFirm2">
                        <img v-if="formCompany.card_pic2" :src="imgurls+ formCompany.card_pic2" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon" style="border: 1px solid #c1c1c1;"></i>
                    </el-upload>
                    </div>
                </div>
                <div class="card_img_up">
                    <div class="severBig_Img face_box">
                        <div class="tit_face_up">示例：</div>
                        <img @click="imgMagnifyOne" :src="smalloneImg.url" alt="">
                    </div>
                    <div class="severBig_Img">
                        <div class="tit_face_up">示例：</div>
                        <img @click="imgMagnifyTwo" :src="smallTwoImage.url" alt="">
                    </div>
                </div>
                <el-form-item label="法人姓名" prop="legal_person">
                    <el-input v-model="formCompany.legal_person" size="mini" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="法人证件号" prop="idnumber">
                    <el-input v-model="formCompany.idnumber" size="mini" style="width: 200px"></el-input>
                </el-form-item>
                <div class="tip_firm">
                    <span class="tip_start">机构证件</span>
                    <span>请按照以下要求上传证件照片（格式要求：jpg、jpeg、png，小于2m）</span>
                </div>
                <el-form-item label="机构证件有效期至" prop="expire_time" :rules="!effectiveDate ? rules.expire_time: [{required: false}]">
                    <el-date-picker
                    size="mini"
                    v-model="formCompany.expire_time"
                    :disabled="pickerDIS"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择机构证件有效截止日期">
                    </el-date-picker>
                    <el-checkbox style="margin-left:8px" v-model="effectiveDate" @change="long_termEffective">长期有效</el-checkbox>
                </el-form-item>
                <div class="firm_img_up">
                    <div class="bid_you_img">
                        <div class="tit_you">上传营业执照</div>
                            <el-upload
                            class="avatar-uploader"
                            :action="imgurls + '/api/Common/upload'"
                            :show-file-list="false"
                            :on-success="upload_pic3">
                            <img v-if="formCompany.charter" :src="imgurls+ formCompany.charter" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon" style="border: 1px solid #c1c1c1;"></i>
                        </el-upload>
                    </div>
                    <div class="small_why_img">
                        <span>示例：</span>
                        <img @click="firmImgUpClick" :src="firmsmall_img.url" alt="">
                    </div>
                </div>
                
                <div class="btn_firm_footer" v-if="authen=='3' || authen=='0'">
                    <v-btn type="plain" size="small" @click="onSubmit">
                        提 交
                    </v-btn>
                </div>
                <!-- <el-form-item v-if="authen=='3'">
                    <p style="color: #e03e2d;">驳回原因：{{remark}}</p>
                </el-form-item> -->
                <el-form-item v-if="authen=='2'">
                    <p style="color: #e03e2d;">实名审核中，请联系管理员操作</p>
                </el-form-item>
            </el-form>
        </div>
        
        <!-- 修改密码 -->
        <div v-else-if="onlySole == '2'" class="changePassword">
            <div class="title_box">
                <v-title
                    :content="'修改密码'"
                    :font-size="20"
                />
                <div @click="goBackInfo" class="return_btn">返回</div>
            </div>
            
            <el-form ref="passWordForm" :model="passWordForm" :rules="passWordRules" label-width="140px">
                <el-form-item label="手机号:" prop="name">
                    <el-input v-model="passWordForm.mobile" disabled style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="验证码:" prop="code">
                            <el-input placeholder="请输入验证码" v-model="passWordForm.code" style="width: 250px">
                                <el-button slot="append" :disabled="disabled" @click="sendCode(passWordForm.mobileSee)">{{ countDown }}</el-button>
                            </el-input>
                    </el-form-item>
                <el-form-item label="新密码:" prop="password">
                    <el-input placeholder="请输入新密码" type="password" v-model="passWordForm.password" autocomplete="off" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="重复密码:" prop="checkPass">
                    <el-input placeholder="请再次输入新密码" type="password" v-model="passWordForm.checkPass" autocomplete="off" style="width: 250px"></el-input>
                </el-form-item>

                <el-form-item>
                    <v-btn type="plain" size="small" @click="editPasswordSubmit">
                        提 交
                    </v-btn>
                </el-form-item>
            </el-form>
            <p style="color:#cc0000;margin-left:50px;">*如有问题请联系客服人员进行处理</p>
        </div>

        <!-- 修改手机号 -->
        <div v-else-if="onlySole == '3'" class="changePhoneNumber">
            <div class="title_box">
                <v-title
                    :content="'修改手机号'"
                    :font-size="20"
                />
                <div @click="goBackInfo" class="return_btn">返回</div>
            </div>
            
            <el-form ref="editPhoneForm" :model="editPhoneForm" :rules="editPhoneRules" label-width="140px">
                <el-form-item label="证件类型:" prop="name">
                    <span>{{editPhoneForm.card_type=='1' ? '居民省份证' : '营业执照'}}</span>
                    <!-- <el-input v-model="editPhoneForm.card_type" disabled style="width: 250px"></el-input> -->
                </el-form-item>
                <el-form-item label="证件号:" prop="card_num">
                    <el-input v-model="editPhoneForm.card_num" style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item label="新手机号" prop="mobile">
                        <el-input v-model="editPhoneForm.mobile" placeholder="请输入联系人手机号" style="width: 250px"></el-input>
                    </el-form-item>
                <el-form-item label="验证码:" prop="code">
                    <el-input placeholder="请输入验证码" v-model="editPhoneForm.code" style="width: 250px">
                        <el-button slot="append" :disabled="disabled" @click="sendCode(editPhoneForm.mobile)">{{ countDown }}</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <v-btn type="plain" size="small" @click="editPhoneSubmit">
                        提 交
                    </v-btn>
                </el-form-item>
            </el-form>
            <p style="color:#cc0000;margin-left:50px;">*如有问题请联系客服人员进行处理</p>
        </div>

        <!-- 绑定邮箱 -->
        <div v-else-if="onlySole == '4'" class="bindEmail">
            <div class="title_box">
                <v-title
                    :content="'绑定邮箱'"
                    :font-size="20"
                />
                <div @click="goBackInfo" class="return_btn">返回</div>
            </div>
            <el-steps :active="activeEmail" finish-status="success" class="lineSteps">
                <el-step title="验证身份"></el-step>
                <el-step title="绑定邮箱"></el-step>
            </el-steps>

            <el-form v-if="activeEmail == '0'" ref="bindEmailForm" :model="bindEmailForm" :rules="bindEmailRules" label-width="140px">
                <el-form-item label="手机号:" prop="mobile">
                        <el-input v-model="bindEmailForm.mobile" disabled style="width: 250px"></el-input>
                    </el-form-item>
                <el-form-item label="验证码:" prop="code">
                    <el-input placeholder="请输入验证码" v-model="bindEmailForm.code" style="width: 250px">
                        <el-button slot="append" :disabled="disabled" @click="sendCode(bindEmailForm.mobile)">{{ countDown }}</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <v-btn type="plain" size="small" @click="afterEmail">
                        下一步
                    </v-btn>
                </el-form-item>
            </el-form>

            <el-form v-if="activeEmail == '1'" ref="submitEmailForm" :model="submitEmailForm" :rules="submitEmailRules" label-width="140px">
                <el-form-item label="邮箱" prop="mobile">
                        <el-input v-model="submitEmailForm.email" style="width: 250px"></el-input>
                    </el-form-item>
                <el-form-item label="验证码:" prop="code">
                    <el-input placeholder="请输入验证码" v-model="submitEmailForm.code" style="width: 250px">
                        <el-button slot="append" :disabled="disabled" @click="getEmailCode(submitEmailForm.email)">{{ countDown }}</el-button> 
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <v-btn type="plain" size="small" @click="submitEmailEdit">
                        确 认
                    </v-btn>
                </el-form-item>
            </el-form>
        </div>

        <!-- 资质信息 -->
        <!-- <div v-else-if="onlySole == '5'" class="certification">
            <div class="title_box">
                <v-title
                    :content="'资质上传'"
                    :font-size="20"
                />
                <div @click="goBackInfo" class="return_btn">返回</div>
            </div>
            <p class="attentionRed top">*请按照要求上传资质照片（格式要求：jpg、jpeg、png，小于2M）</p>
            <el-form ref="formCertification" :model="formCertification" :rules="rulesCertification" label-width="50px">
                <el-form-item prop="file">
                    <el-upload
                        class="avatar-uploader"
                        :action="imgurls + '/api/Common/upload'"
                        :show-file-list="false"
                        :before-upload="handleAvatarSuccess"
                        :on-success="upload_certification">
                        <img v-if="formCertification.file" :src="imgurls+ formCertification.file" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon" style="border: 1px solid #c1c1c1;"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item>
                    <v-btn type="plain" size="small" @click="certificationSubmit">
                        立即提交
                    </v-btn>
                </el-form-item>
            </el-form>
            <p class="attentionRed">*如有问题请联系客服人员进行处理</p>
        </div> -->

        <div v-else-if="onlySole == '5'" class="certification">
            <div class="title_box">
                <v-title
                    :content="'资质上传'"
                    :font-size="20"
                />
                <div @click="goBackInfo" class="return_btn">返回</div>
            </div>
            <p class="attentionRed top">*请按照要求上传资质照片（格式要求：jpg、jpeg、png，小于2M）</p>
            <el-form ref="formCertification" :model="formCertification" :rules="rulesCertification" label-width="50px">
                <el-form-item prop="qualification_photos">
                    <el-upload
                        class="avatar-uploader"
                        :action="imgurls + '/api/Common/upload'"
                        list-type="picture-card"
                        :before-upload="handleAvatarSuccess"
                        :on-success="upload_certification"
                        :on-remove="handleRemove"
                        :file-list="loanRecordFiles"
                        :disabled="imageUploadDisabled"
                        >
                        <i class="el-icon-plus"></i>
                        <!-- <img v-if="formCertification.file" :src="imgurls+ formCertification.file" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon" style="border: 1px solid #c1c1c1;"></i> -->
                    </el-upload>
                </el-form-item>
                <el-form-item >
                    <v-btn type="plain" size="small" @click="certificationSubmit" :disabled="imageUploadDisabled">
                        立即提交
                    </v-btn>
                </el-form-item>
            </el-form>
            <p class="attentionRed">*如有问题请联系客服人员进行处理</p>
        </div>

        <!-- 注销账号 -->
        <div v-else-if="onlySole == '6'" class="unsubscribe">
            <div class="title_box">
                <v-title
                    :content="'注销账号'"
                    :font-size="20"
                />
                <div @click="goBackInfo" class="return_btn">返回</div>
            </div>
            <div v-if="showOne" class="box_first">
                <p class="title">将“{{allform.username}}”账号注销</p>
                <p class="red_tip">注意：注销账号后以下信息将被清空且无法找回</p>
                <ul class="box_gray">
                    <li>
                        身份、账户信息
                    </li>
                    <li>
                        参拍记录、我的关注、我的预约
                    </li>
                    <li>
                        请确保所有交易已完结且无纠纷（确保没有已报名未参拍的标的）
                    </li>
                </ul>
                <div class="box_second">
                    <p>
                        点击【确认注销】即代表您已经同意 
                        <span class="book">《用户注销协议》</span>
                    </p>
                    <v-btn type="plain" size="small" @click="querycancellation" class="btn_zx">
                        确认注销
                    </v-btn>
                </div>
            </div>
           <div v-else class="box_zaro">
                <p class="title">为确保是您本人操作，请完成以下验证</p>
                <p class="ophone">{{allform.mobile}}</p>
           </div>
        </div>

    </div>
</template>

<script>
import vBtn from '@/components/title/b-btn.vue'
import {getUserInfoID} from '@/utils/auth'
import {authentication,getCode,changePassword,
    getMailboxCode,modifyBindingPhone,bindingEmail,
    uploadQualifications,realNameData,getQualificationInfo} from '@/api/user'
import vTitle from '@/components/title/a-tip.vue'
export default{
    components:{
        vTitle,vBtn
    },
    data(){
        var validatePass = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请输入密码'));
            } else {
            if (this.passWordForm.checkPass !== '') {
                this.$refs.passWordForm.validateField('checkPass');
            }
            callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请再次输入密码'));
            } else if (value !== this.passWordForm.password) {
            callback(new Error('两次输入密码不一致!'));
            } else {
            callback();
            }
        };
        const validatePhone = (rule, value, callback) => {
            // 判断输入框中是否输入手机号
            if (!value) {
                callback(new Error('手机号不能为空'))
            }
            //正则表达式进行验证手机号，从1开始，第二位是35789中的任意一位，以9数字结尾
            if (!/^1[345789]\d{9}$/.test(value)) {
                callback(new Error('手机号格式不正确'))
            }
            callback()
        };
        return{
            uid:"",
            onlySole:'10', //用来控制哪个模块来显示隐藏，默认主页显示
            allform:{
                username:'',
                name:'',
                mobile:'',
                email:'',
            },
            

            levelType:'',
            form:{ //个人
                uid:"",
                name:'',
                card_num:'',
                card_pic1:'',
                card_pic2:''
            },
            rules:{
                name:[{ required: true,message: '请填写身份证姓名' , trigger: 'blur' }],  
                card_num:[{ required: true,message: '请填写身份证号' , trigger: 'blur' }],  
                card_pic1:[{ required: true,message: '请上传身份证正面照' , trigger: 'blur' }],  
                card_pic2:[{ required: true,message: '请上传身份证反面照' , trigger: 'blur' }],  
            },
            formCompany:{ //企业
                uid:'',
                name:'', //机构名称
                card_num:'', //同意社会信用代码
                card_ty:'1', //法人证件类型
                idnumber:'',//法人身份证号
                card_pic1:'', //法人身份证照片
                card_pic2:'', //法人身份证照片
                legal_person:"", //法人姓名
                expire_time:'', // 机构证件有效期至
                charter:'', //营业执照
            },
            rulesCompany:{
                name:[{ required: true,message: '请填写公司名称' , trigger: 'blur' }],  
                card_num:[{ required: true,message: '请填写统一社会信用代码' , trigger: 'blur' }],  
                idnumber:[{ required: true,message: '请填写法人身份证号' , trigger: 'blur' }],  
                card_pic1:[{ required: true,message: '请上传法人身份证照片正面' , trigger: 'blur' }], 
                card_pic2:[{ required: true,message: '请上传法人身份证照片反面' , trigger: 'blur' }], 
                charter:[{ required: true,message: '请上传营业执照' , trigger: 'blur' }], 
                card_ty:[{ required: true,message: '请选择法人证件类型' , trigger: 'change' }], 
                expire_time:[{ required: true,message: '请选择机构证件有效期' , trigger: 'change' }], 
                legal_person:[{ required: true,message: '请填写法人姓名' , trigger: 'blur' }], 
            },
            authen:'',
            remark:"", //被驳回原因
            options_legalPerson:[{ value: '1',label: '居民身份证'}],
            smalloneImg:{index:'1',url:require('@/assets/cardfont1small.png')},
            smallTwoImage:{index:'1',url:require('@/assets/cardend1small.png')},
            firmsmall_img:{index:'1',url:require('@/assets/company-pic.png')},
            effectiveDate:false,
            pickerDIS:false,
            // -----修改密码-------
            passWordForm:{
                mobile:'',
                code:'',
                password:'',
                checkPass:'',
                mobileSee:'',
            },
            passWordRules:{
                code: [{ required: true, trigger: 'blur', message: '请输入6位验证码'},
                    { required: true, trigger: 'blur', min: 6, max: 6,message: '验证码错误'}], 
                password: [{ required: true,validator: validatePass, trigger: 'blur' }],
                checkPass:[{ required: true,validator: validatePass2, trigger: 'blur' }],
            },
            disabled:false,
            time:0,
            countDown: "获取验证码",

            // ---------修改手机号-------------
            editPhoneForm:{
                card_type:'',
                card_num:'',
                mobile:'',
                code:'',
            },
            editPhoneRules:{
                card_num:[{ required: true,message: '请填写身份证号' , trigger: 'blur' }], 
                mobile:[{ required: true, trigger: 'blur', message: '请输入11位手机号'},
                    { required: true, trigger: 'blur', min: 11, max: 11, message: '长度不符合'},
                    { required: true, trigger: 'blur', validator: validatePhone}],
                code: [{ required: true, trigger: 'blur', message: '请输入6位验证码'},
                    { required: true, trigger: 'blur', min: 6, max: 6,message: '验证码错误'}], 
            },

            // ---------修改邮箱----------
            activeEmail:0,
            bindEmailForm:{
                mobile:"",
                code:'',

            },
            bindEmailRules:{
                code: [{ required: true, trigger: 'blur', message: '请输入6位验证码'},
                    { required: true, trigger: 'blur', min: 6, max: 6,message: '验证码错误'}], 
            },
            submitEmailForm:{
                email:'',
                code:''
            },
            submitEmailRules:{
                email:[
                    { required: true,message: '请填写邮箱' , trigger: 'blur' } 
                ],
                code: [{ required: true, trigger: 'blur', message: '请输入6位验证码'},
                    { required: true, trigger: 'blur', min: 6, max: 6,message: '验证码错误'}],
            },
            // 资质信息
            formCertification:{
                qualification_photos:""
            },
            rulesCertification:{
                qualification_photos:[{ required: true,message: '请上传资质信息' , trigger: 'blur' }]
            },
            showOne:true,
            loanRecordFiles:[],
            imageUploadDisabled:false,
        }
    },
    created(){
        this.getUserData();
        this.getRealNameInfo();
        this.getQuali()
    },
    methods:{
        getUserData(){
            //获取当前是 企业2 还是 个人1
            var userInfo = getUserInfoID();
            if(userInfo){
                var info = JSON.parse(userInfo);
                this.allform.username = info.username;
                this.allform.name = info.name;
                this.allform.mobile = info.mobile;
                this.allform.email = info.email;
                // ---------实名认证-----------
                this.levelType = info.level;  //企业2 还是 个人1
                this.uid = info.id;
                this.form.uid = info.id;
                this.formCompany.uid = info.id;
                this.form.name = info.name;
                //--修改手机号----- 将手机号中间四位替换为星号
                this.editPhoneForm.card_type = info.card_type;
                var mobile = info.mobile.replace(info.mobile.substring(3,7), "****");
                this.passWordForm.mobile = mobile; //修改密码-表单-手机号返显
                this.passWordForm.mobileSee = info.mobile;
                // ---绑定邮箱
                this.bindEmailForm.mobile = info.mobile;
                // ----资质信息----
                this.formCertification.qualification_photos = info.qualification_photos;
            }
        },
        /**安全服务中的按钮  id:1
         * 1-实名认证  2-登录密 3-手机绑定  4-邮箱绑定  5-资质信息  6-注销账号
         **/ 
        personageGo(id){
            switch (id){
                case '1':
                   this.onlySole = '1';
                   this.getRealNameInfo();
                    break;
                case '2':
                    this.onlySole = '2'
                    break;
                case '3':
                    this.onlySole = '3'
                    break;
                case '4':
                    this.onlySole = '4'
                    break;
                case '5':
                    this.onlySole = '5'
                    break;
                case '6':
                    this.onlySole = '6'
                    break;
			}
        },
        aftermobileGo(){
            this.onlySole = '3';
        },
        emailBindGo(){
            this.onlySole = '4';
        },
        // ---------实名认证----------
        getRealNameInfo(){
            realNameData({id:this.uid}).then(res =>{
                this.authen = res.data[0].authen;
                this.remark = res.data[0].remark;
                if(this.levelType == '1'){
                    this.form.name = res.data[0].name;
                    this.form.card_num=res.data[0].card_num;
                    this.form.card_pic1=res.data[0].card_pic1;
                    this.form.card_pic2=res.data[0].card_pic2;
                }else if(this.levelType == "2"){
                    this.formCompany.name = res.data[0].name;
                    this.formCompany.card_num = res.data[0].card_num;
                    this.formCompany.idnumber = res.data[0].idnumber;
                    this.formCompany.card_pic1 = res.data[0].card_pic1;
                    this.formCompany.card_pic2 = res.data[0].card_pic2;
                    this.formCompany.legal_person = res.data[0].legal_person;
                    this.formCompany.expire_time = res.data[0].expire_time;
                    this.formCompany.charter = res.data[0].charter;
                    this.formCompany.card_ty = '1';
                }
                   
            }); 
        },
        onSubmit(){
            if( this.levelType == '1'){ //个人
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.postUserRealName(this.form)
                    }else {
                        return false
                    }
                })
            }else if(this.levelType == "2"){ //企业
                this.$refs.formCompany.validate(valid => {
                    if (valid) {
                        delete this.formCompany.card_ty;
                        console.log(this.formCompany);
                        this.postUserRealName(this.formCompany)
                    }else {
                        return false
                    }
                })
            }
        },
        postUserRealName(obj){
            authentication(obj).then(res => {
                this.$message({
                    message: res.msg,
                    type: 'success'
                });
                this.onlySole = '10';
                this.getUserData();
                this.getRealNameInfo();
            })
        },
        upload_pic1(res, file){
            this.form.card_pic1 = res.data.file_path
        },
        upload_pic2(res, file){
            this.form.card_pic2 = res.data.file_path
        },
        upload_pic3(res, file){
            this.formCompany.charter = res.data.file_path;
        },
        upload_picFirm1(res, file){
            this.formCompany.card_pic1 = res.data.file_path
        },
        upload_picFirm2(res, file){
            this.formCompany.card_pic2 = res.data.file_path
        },
        imgMagnifyOne(){
            if(this.smalloneImg.index == '1'){
                this.smalloneImg={
                    index:'2',
                    url:require('@/assets/cardfont1big.png')
                }
            }else{
                this.smalloneImg={
                    index:'1',
                    url:require('@/assets/cardfont1small.png')
                }
            }
        },
        imgMagnifyTwo(){
            if(this.smallTwoImage.index == '1'){
                this.smallTwoImage={
                    index:'2',
                    url:require('@/assets/cardend1big.png')
                }
            }else{
                this.smallTwoImage={
                    index:'1',
                    url:require('@/assets/cardend1small.png')
                }
            }
        },
        firmImgUpClick(){
            if(this.firmsmall_img.index == '1'){
                this.firmsmall_img={index:'2',url:require('@/assets/company-big.png')}

            }else{
                this.firmsmall_img={index:'1',url:require('@/assets/company-pic.png')}
            }
        },
        long_termEffective(val){
            if(val){
                this.pickerDIS = true;
                this.formCompany.expire_time='';
            }else{
                this.pickerDIS = false;
            }
        },
        // ---修改密码---------------------------
        // 点击获取验证码
        sendCode(mobile){
            
                this.time = 60;
                this.disabled = true;
                //调用倒计时方法
                this.timer();
                getCode({mobile:mobile}).then(res=>{
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    });
                });
            

        },
        // 填写验证码倒计时
        timer() {
            if (this.time > 0) {
                this.time--;
                this.countDown = "已发送" + this.time + 's';
                setTimeout(this.timer, 1000);
            } else {
                this.time = 0;
                this.countDown = "获取验证码";
                this.disabled = false;
            }
        },
        // 点击提交修改密码
        editPasswordSubmit(){
            this.$refs.passWordForm.validate(valid => {
                if (valid) { 
                    var obj = {
                        id:this.uid,
                        mobile:this.passWordForm.mobileSee,
                        code:this.passWordForm.code,
                        password:this.passWordForm.password,
                    };
                    changePassword(obj).then(res =>{
                        if(res.code == 200){
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.onlySole = '10'
                            this.getUserData();
                        }
                    });
                }
            });  
        },

        //------------修改手机号---------------
        editPhoneSubmit(){
            this.$refs.editPhoneForm.validate(valid => {
                if (valid) { 
                    var obj ={
                        id:this.uid,
                        card_num:this.editPhoneForm.card_num,
                        mobile:this.editPhoneForm.mobile,
                        code:this.editPhoneForm.code,
                    }
                    modifyBindingPhone(obj).then(res =>{
                        if(res.code == 200){
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.onlySole = '10';
                            this.getUserData();
                        }
                    });
                }
            });
        },

        // --------绑定邮箱---------- 
        // 下一步
        afterEmail(){
            this.$refs.bindEmailForm.validate(valid => {
                if (valid) { 
                    this.activeEmail = 1;
                }
            });
            
        },
        // 确认提交
        submitEmailEdit(){
            this.$refs.submitEmailForm.validate(valid => {
                if (valid) { 
                    let newObj = Object.assign({id:this.uid}, this.submitEmailForm);
                    bindingEmail(newObj).then(res =>{
                        if(res.code == 200){
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            })
                            this.onlySole = '10';
                            this.getUserData();
                        }
                    })
                }
            });
        },
        // 获取邮箱验证码
        getEmailCode(email){
            this.time = 60;
            this.disabled = true;
            //调用倒计时方法
            this.timer();
            getMailboxCode({email:email}).then(res=>{
                this.$message({
                    message: res.msg,
                    type: 'success'
                })
            });
        },
        // -------资质信息-------
        upload_certification(res, file){
            // this.formCertification.file = res.data.file_path
            // 将上传成功的文件添加到文件列表
            const newFile = {
                name: file.name,
                url: res.data ? (res.data.file_path.startsWith('http') ? res.data.file_path : this.imgurls + res.data.file_path) : 
                    (res.file.startsWith('http') ? res.file : this.imgurls + res.file)
            };
            this.loanRecordFiles.push(newFile);
            // 更新表单字段为文件路径数组
            this.formCertification.qualification_photos = this.loanRecordFiles.map(item => {
                // 如果URL已经包含基础URL则不重复添加
                return item.url.startsWith(this.imgurls) ? item.url.replace(this.imgurls, '') : item.url;
            }).join(',');
        },
         // 处理文件删除
        handleRemove(file, fileList) {
            // 更新loanRecordFiles为删除后的文件列表
                this.loanRecordFiles = fileList;
                // 更新表单字段
                this.formCertification.qualification_photos = this.loanRecordFiles.map(item => {
                    // 如果URL已经包含基础URL则不重复添加
                    return item.url.startsWith(this.imgurls) ? item.url.replace(this.imgurls, '') : item.url;
                }).join(',');
            },
            getQuali(){
                getQualificationInfo().then(res => { 
                    // 初始化已上传的资质图片回显
                    if (res.data && res.data.qualification_photos) {
                        // 处理qualification_photos可能为数组或字符串的情况
                        let photos = [];
                        if (Array.isArray(res.data.qualification_photos)) {
                            photos = res.data.qualification_photos;
                        } else {
                            photos = res.data.qualification_photos.split(',');
                        }
                        this.loanRecordFiles = photos.map(photo => {
                            // 检查photo是否已经是完整URL
                            const fullUrl = photo.startsWith('http') ? photo : (photo.startsWith('/') ? this.imgurls + photo : this.imgurls + '/' + photo);
                            return {
                                name: photo.split('/').pop(), // 提取文件名
                                url: fullUrl
                            };
                        });
                        this.imageUploadDisabled =true
                    }
                })
            },
        handleAvatarSuccess(file){
                // 获取后缀名
                const suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
                // 判断是否符合文件大小的限制需求
                const isLt2M = file.size / 1024 / 1024 < 2
                // 判断是否符合文件类型需求
                let accept = 'jpg/png/jpeg'
                const isLtType = accept.indexOf(suffix) >= 0
                if (!isLtType) {
                    this.$message({
                    message: `上传文件格式必须为${accept}`,
                    type: 'warning'
                    })
                }
                if (!isLt2M) {
                    this.$message({
                    message: `上传文件大小不能超过2M!`,
                    type: 'warning'
                    })
                }

                return isLt2M && isLtType
        },
        certificationSubmit(){
            // formCertification
            this.$refs.formCertification.validate(valid => {
                if (valid) {
                    uploadQualifications(this.formCertification).then(res => {
                        if(res.code == 200){
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            })
                        }
                    });
                }else {
                    return false
                }
            })
           
        },
        /**点击返回**/ 
        goBackInfo(){
            this.onlySole = '10';
            this.getUserData();
            this.getRealNameInfo();
        },
        // 确认注销
        querycancellation(){
            this.showOne = false;
        }
    }

}
</script>

<style lang="less" scoped>

.userInfo{



    .btnamend{
                margin-left: 10px;
            }
    .allInfo{
        .formInfo{
            margin-top: 20px;
        }
        .card_line{
            margin-top: 20px;
            .c_content{
                display: flex;
                justify-content: space-between;
                align-items: center;
                p{
                    .c_title{
                        font-size: 18px;
                        font-weight: 600;
                        margin-right: 30px;

                    }
                }
                .el-button{
                    width: 104px;
                }
                
            }
            
        }
    }








    .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            img{
                width: 230px;
                height: 145px; 
            }
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 230px;
            height: 145px;
            line-height: 145px;
            text-align: center;
        }

    .title_box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .return_btn{
            color: #909399;
            font-size: 14px;
        }
    }


    // 实名认证
    .realName{
        /deep/.el-form{
            .el-form-item {
                margin-bottom: 10px;
                .el-form-item__content{
                    .el-form-item__error{
                        padding-top: 0;
                    }
                }
               
            }
        }
        .tip_firm{
            font-size: 14px;
            margin-left: 50px;
            margin-bottom: 20px;
            .tip_start{
                font-size: 16px;
                margin-right: 4px;
                color: #343436;
            }
        }
        .card_img_up{
            margin-left: 50px;
            margin-bottom: 20px;
            display: flex;
            .tit_face_up{
                font-size: 14px;
                margin-bottom: 8px;
            }
            .face_box{
                margin-right: 50px;
            }
            .severBig_Img{
                img{
                    cursor: pointer;
                border: 1px dashed #d7d7d7;
                border-radius: 8px;
                padding: 10px;
                }
            }
        }
        .firm_img_up{
            margin-left: 50px;
            display: flex;
            align-items: center;
            .bid_you_img{
                .tit_you{
                    font-size: 14px;
                    margin-bottom: 8px;
                }
            }
            .small_why_img{
                font-size: 14px;
                margin-left: 50px;
                display: flex;
                align-items: center;
                img{
                    cursor: pointer;
                    border: 1px dashed #d7d7d7;
                    border-radius: 8px;
                    padding: 10px;
                }
            }
        }
        .btn_firm_footer{
            margin-top: 50px;
            margin-left: 200px;
        }
        .w_tit_com{
            font-size: 16px;
            font-weight: 600;
            margin: 10px 0;
        }
        .el-form{
            margin-top: 20px;
        }
        .avatar-uploader {
            /deep/.el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 16px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
                img{
                    width: 230px;
                    height: 145px; 
                }
            }
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 230px;
            height: 145px;
            line-height: 145px;
            text-align: center;
        }
    }

    // 修改密码
    .changePassword{
        .el-form{
            margin-top: 20px;
        }
    }

    // 绑定邮箱
    .bindEmail{
        min-height: 600px;
        .lineSteps{
            margin: 50px 90px;
        }
    }
    
    // 资质信息
    .certification{
        min-height: 600px;
        .attentionRed{
            color: #e03e2d;
            margin-left: 50px;
        }
        .top{
            margin: 20px 0 20px 50px;
        }
    }
    // 注销账号
    .unsubscribe{
        min-height: 600px;
      .box_first{
        margin-top: 30px;
        margin-left: 20px;
        .red_tip{
            color: #e03e2d;
            font-size: 12px;
            margin: 16px 0;
        }
        .box_gray{
            font-size: 14px;
            background-color: #d7d7d7;
            border-radius: 8px;
            padding: 10px 20px;
            li{
                line-height: 40px;
            }
            

        }
        .title{
            font-size: 20px;
            
        }
        .box_second{
            font-size: 12px;
            margin-left: 20px;
            margin-top: 50px;
            p{
                margin-bottom: 16px;
                .book{
                    color: #409EFF;
                    cursor: pointer;
                }
            }
            .btn_zx{
                margin-bottom: 16px;
                margin-left: 100px;
            }
        } 
      } 
      
      .box_zaro{
        padding:30px 20px;
        .title{
            font-size: 20px;
            font-weight: 600;
        }
        .ophone{
            font-size: 12px;
        }
      }
    }


}
</style>